<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>添加口碑</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <el-form
          :model="formData"
          :rules="rules"
          ref="myform"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名" prop="username">
            <el-input v-model="formData.username"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="phone">
            <el-input v-model="formData.phone"></el-input>
          </el-form-item>

          <el-form-item prop="inputtime" label="报备时间">
            <el-date-picker v-model="formData.inputtime" value-format="yyyy-MM-dd HH:mm:ss"  type="datetime" placeholder="报备时间"></el-date-picker>
          </el-form-item>

          <el-form-item label="口碑来源" prop="source">
            <el-select v-model="formData.source" placeholder="请选择口碑来源">
              <el-option label="毕业生" value="1"></el-option>
              <el-option label="朋友" value="2"></el-option>
              <el-option label="同事" value="3"></el-option>
              <el-option label="网络" value="4"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="备注" prop="message">
            <el-input type="textarea" v-model="formData.message"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('myform')">添加</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
import request from "@/api/koubei";
export default {
  data() {
    return {
      formData: {
        username: "",
        phone: "",
        inputtime: "",
        source: "",
        message: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入口碑姓名", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          request.addkb(this.formData).then((r) => {
            if (r.data.code === 0) {
              // 添加成功的提示
              this.$message({
                type: "success",
                message: "添加成功",
              });

              // 添加成功后重置表单
              this.$refs[formName].resetFields();

              // 添加成功后跳转到列表
              this.$router.push('/index/kb-list')
              
            } else {
              this.$message.error(r.data.msg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
</style>